<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 350px;
            height: 350px;
            border:1px solid #000;
            position: relative;
            margin: 100px auto;
        }
        .big{
            width: 400px;
            height: 400px;
            position: absolute;
            left: 360px;
            top: 30px;
            border: 1px solid #000;
            overflow: hidden;
            display: none;
        }
        .small {
            width: 175px;
            height: 175px;
            position: absolute;
            background-color: rgba(0,0,0,.5);
            left: 0;
            top: 0;
            display: none;
        }
        img {
            position: absolute;
        }

    </style>
</head>
<body>
    <div class="box">
        <img src="001.jpg" alt="">
        <div class="small"></div>
        <div class="big">
            <img src="0001.jpg" alt="">
        </div>
    </div>
</body>
<script>
    ;(function(){
        //获取元素
        var box = document.querySelector('.box')
        var small = document.querySelector('.small')
        var big = document.querySelector('.big')
        var img = document.querySelector('.big img')

        //注册事件
        //移入出现二个框框
        box.onmouseenter = function(){
            small.style.display = 'block';
            big.style.display = 'block'
        }
        //在box移动,框框跟随
        box.onmousemove = function(e){
            var x = e.pageX - box.offsetLeft;
            var y = e.pageY - box.offsetTop;
            small.style.left = x-small.offsetWidth/2 + 'px'
            small.style.top = y-small.offsetHeight/2 + 'px'
            //限定小方块位置
            small.style.left = small.offsetLeft < 0 ? 0+'px' : small.style.left;
            small.style.left = small.offsetLeft > box.offsetWidth-small.offsetWidth ? box.offsetWidth-small.offsetWidth+'px':small.style.left;
            small.style.top = small.offsetTop < 0 ? 0+'px' : small.style.top;
            small.style.top = small.offsetTop > box.offsetHeight-small.offsetHeight ? box.offsetHeight-small.offsetHeight+'px':small.style.top;
            //让大方块里的图片跟着动
            img.style.left = -big.offsetWidth/small.offsetWidth*small.offsetLeft +'px';
            img.style.top = -big.offsetHeight/small.offsetHeight*small.offsetTop +'px';
        }
        box.onmouseleave = function(){
            small.style.display = '';
            big.style.display = ''
        }
    }())
</script>
<script src='../jquery-1.12.4.js'></script>
<script>
    // $(function(){
    //     $('.box').on('mouseenter',function(){
    //         //当鼠标进入,让小方块跟随鼠标移动
    //         $('.small').show()
    //         $('.big').show()
    //     }).on('mousemove',function(e){
    //         //让小方块跟着鼠标移动
    //         $('.small').offset({top:e.pageY-$('.small').outerHeight()/2,left:e.pageX -$('.small').outerWidth()/2})
    //         //限制小方块在地图的位置
    //         $('.small').position().left < 0 ? $('.small').offset({left:$('.box').offset().left}):null;
    //         $('.small').position().top < 0 ? $('.small').offset({top:$('.box').offset().top}):null;
    //         $('.small').offset().left >= $('.box').offset().left+($('.box').width()-$('.small').width())? $('.small').offset({left:$('.box').offset().left+($('.box').outerWidth()-$('.small').width())}):null;
    //         $('.small').offset().top > $('.box').offset().top+($('.box').height()-$('.small').height()) ? $('.small').offset({top:$('.box').offset().top+($('.box').height()-$('.small').height())}):null;
    //         //控制大方块图片的移动
    //         $('.big img').offset({left:$('.big').offset().left-$('.big').width()/$('.small').width()*$('.small').position().left,top:$('.big').offset().top-$('.big').height()/$('.small').height()*$('.small').position().top})
    //     }).on('mouseleave',function(){
    //         $('.small').hide()
    //         $('.big').hide()
    //     })
    // })
</script>
</html>